/*
 * @Author: Zhouhai 497675647@qq.com
 * @Date: 2023-02-08 18:20:08
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2023-03-03 17:09:57
 */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from 'react'
import { observer } from 'mobx-react'
import { AtAvatar, AtGrid, AtList, AtListItem } from 'taro-ui'
import './index.scss';


import userPng from '../../resource/images/work/user.png'
import menuPng from '../../resource/images/work/menu.png'
import rolePng from '../../resource/images/work/role.png'
import postPng from '../../resource/images/work/post.png'

import editinfoPng from '../../resource/images/mine/editinfo.png'
import lovePng from '../../resource/images/mine/love.png'
import questionPng from '../../resource/images/mine/question.png'
import setupPng from '../../resource/images/mine/setup.png'
import Taro from '@tarojs/taro';
import { useStore } from '@/store';


const Mine: React.FC = () => {

  const {UserStore} = useStore();

  const onGridClick = ()=> {
    Taro.showToast({
      title: '模块建设中~',
      icon: 'none',
      duration: 2000
    })
  }

  return (
    <view className="mine-container">
      <view className="header-section">
        <view style={{ display: 'flex', justifyContent: 'space-between' }}>
          <view style={{ display: 'flex', alignItems: 'center' }}>
            <AtAvatar circle image={UserStore.avatar} size='large'></AtAvatar>
            <view className="user-info">
              <text>用户名:{UserStore.name}</text>
            </view>
          </view>
          <view style={{ display: 'flex', alignItems: 'center', paddingRight: '25px' }}>
            <view className="u_title">
              {`个人信息 >`}
            </view>
          </view>
        </view>
      </view>

      <view className="content-section">
        <view className="mine-actions">
          <AtGrid columnNum={4} onClick={onGridClick} data={
            [
              {
                image: userPng,
                value: '交流群'
              },
              {
                image: rolePng,
                value: '在线客服'
              },
              {
                image: menuPng,
                value: '反馈社区'
              },
              {
                image: postPng,
                value: '点赞我们'
              }
            ]
          } />
        </view>

        <view className='mine-list'>
          <AtList>
            <AtListItem
              title='编辑资料'
              arrow='right'
              thumb={editinfoPng}
            />
            <AtListItem
              title='常见问题'
              arrow='right'
              thumb={questionPng}
            />
            <AtListItem
              title='关于我们'
              arrow='right'
              thumb={lovePng}
            />
            <AtListItem
              title='应用设置'
              arrow='right'
              thumb={setupPng}
            />
          </AtList>
        </view>
      </view>

    </view>
  )
}
export default observer(Mine);  